<template>
    <div>
      <div ref="c223" style="height: 200px; margin-top: 15px; margin-right: 15px"></div>
    </div>
  </template>
  
  <script>
  import { Column } from '@antv/g2plot';
  import { get } from '@/utils/request'
  export default {
    data() {
      return {
        valueData: [],
        columnChart: null,
      };
    },
    methods: {
      loadColumn() {
        this.columnChart = new Column(this.$refs.c223, {
          data: this.valueData,
          xField: 'type',
          yField: 'value',
          legend: {
            position: 'top',
          },
          columnStyle: (datum) => ({
            fill: datum.value > 1 ? 'pink' : '#ccccff',
          }),
          tooltip: {
            domStyles: {
              "g2-tooltip": {
                backgroundColor: '#147',
                color: 'grey',
                fontSize: 20
              }
            }
          },
          xAxis: {
            label: {
              style: {
                fontSize: 15,
                fill: 'grey',
              },
              formatter: (text) => {
                const maxLength = 4;
                return text.length > maxLength
                  ? text.slice(0, maxLength) + '...'
                  : text;
              }
            },
          },
          // 添加 y 轴配置
          yAxis: {
            min: 0,
            max: 3
          }
        });
        this.columnChart.render();
      },
      async getValueData() {
        let res = await get('/dashboard/queryEngineerBindDeviceNumber');
        console.log(res, '获取响应');
        this.valueData = res.data;
      }
    },
    async mounted() {
      await this.getValueData();
      this.loadColumn();
    }
  }
  </script>
  <style scoped></style>